<template>
  <div>
    <el-form :inline="true" :model="articleForm" ref="articleRef" :rules="articleRules" size="small">
      <el-form-item label="标题" prop="title">
        <el-input v-model="articleForm.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="articleForm.type" placeholder="请选择">
          <el-option v-for="item in articleType" :label="item.fTypeName" :value="item.fId"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <v-md-editor v-model="articleHtml" height="82vh" :disabled-menus="[]" @upload-image="handleUploadImage" @save="saveArticle"></v-md-editor>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
  onMounted,
  getCurrentInstance,
  ComponentInternalInstance,
} from 'vue'
import { ElMessage } from 'element-plus'
import jsCookie from 'js-cookie'
import { upLoadImage, Article } from '@/api/apiConfig'
import { useRouter } from 'vue-router'

export default defineComponent({
  setup() {
    const articleHtml = ref<string>('')
    const articleType = ref<any[]>([])
    const articleRef = ref()
    const userInfo = JSON.parse(jsCookie.get('userInfo') || '')
    const router = useRouter()
    const { proxy }: any = getCurrentInstance() as ComponentInternalInstance
    const articleForm = reactive({
      title: '',
      type: '',
    })
    const articleRules = reactive({
      title: [
        {
          required: true,
          message: '请输入标题',
          trigger: 'blur',
        },
      ],
      type: [
        {
          required: true,
          message: '请选择文章类型',
          trigger: 'blur',
        },
      ],
    })
    const handleUploadImage = (event, insertImage, files) => {
      // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
      const params = {
        file: files[0],
      }
      upLoadImage
        .singleUploadFile(params)
        .then((res) => {
          if (res.statusCode === 200) {
            return res.data.filePath
          } else {
            return false
          }
        })
        .then((imgUrl) => {
          insertImage({
            url: imgUrl,
            desc: '翻滚吧牛宝宝',
            width: 'auto',
            height: 'auto',
          })
        })
    }

    const getArticleType = () => {
      Article.getArticleType().then((res) => {
        articleType.value = res.data
      })
    }
    onMounted(() => {
      getArticleType()
    })

    const saveArticle = (text, html) => {
      articleHtml.value = html
      proxy?.$refs.articleRef.validate((valid) => {
        if (valid) {
          let params = {
            fTitle: articleForm.title,
            fAuthor: userInfo.name,
            fContent: articleHtml.value,
            fTypeId: articleForm.type,
          }
          Article.addArticle(params).then((res) => {
            if (res.statusCode === 200) {
              ElMessage({
                type: 'success',
                message: '新增文章成功',
                onClose: function () {
                  router.push({
                    path: '/articlelist',
                  })
                },
              })
            }
          })
        }
      })
    }
    const issueArticle = () => {}
    return {
      articleRef,
      articleForm,
      articleHtml,
      handleUploadImage,
      saveArticle,
      articleType,
      articleRules,
      issueArticle,
    }
  },
})
</script>

<style scoped></style>
